import React from 'react';
import { Layout, Avatar, Dropdown, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import MenuCom from '../MenuCom/MenuCom';
import './Header.css'
import { useDispatch } from 'react-redux';
import { logout } from '../../store/authSlice';
import { useNavigate } from 'react-router-dom';

const items1 = ['1', '2', '3'].map((key) => ({
  key,
  label: `模块${key}`,
}));
const Header = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const dispatch = useDispatch()
  const nav = useNavigate()
  const exit = () => {
    dispatch(logout())
    messageApi.success('退出成功')
    setTimeout(()=>{
      nav('/', {replace: true})
    },500)
  }
  const items = [
    {
      key: '1',
      label: (<span className='span'>个人中心</span>),
    },
    {
      key: '2',
      label: (<span className='span'>修改密码</span>),
    },
    {
      key: '3',
      label: (<span className='span' onClick={exit}>退出</span>),
    },
  ];
  const { Header } = Layout;
  let dark = 'dark',
    mode = 'horizontal',
    index = '2'
  return (
    <>
      {contextHolder}
      <Header className="header">
        <div className="logo" />
        <div className='menu'>
          <MenuCom theme={dark} mode={mode} defaultSelectedKeys={[index]} items={items1}></MenuCom>
        </div>
        <div className='Avatar'>
          <Dropdown menu={{ items }} placement="bottom">
            <Avatar style={{ backgroundColor: '#87d068' }} size={42} icon={<UserOutlined />} />
          </Dropdown>
        </div>
      </Header>
    </>
  );
};

export default Header;